<template>
  <view class="product-container">
    <!-- 商品图片区域 -->
    <view class="product-images">
      <view class="image-group">
        <view class="thumbnail-container">
          <view 
            v-for="(image, index) in productImages" 
            :key="index"
            class="thumbnail"
          >
            <image 
              :src="image.url" 
              :alt="image.alt"
              class="thumbnail-image"
              mode="aspectFill"
            />
          </view>
        </view>
        <view class="view-more">
          <text class="view-more-text">{{ productImages.length }} 款</text>
          <IconFont font-class-name="iconfont" class-prefix="icon" name="right" size="20" class="view-more-icon" />
        </view>
      </view>
    </view>

    <!-- 价格区域 -->
    <view class="price-section">
      <view class="price-group">
        <text class="price-main">¥ {{ productInfo.price }}</text>
        <text class="price-tag">{{ productInfo.priceTag }}</text>
        <text class="price-original">¥{{ productInfo.originalPrice }}</text>
        <text class="sales-count">已售 {{ productInfo.salesCount }}</text>
      </view>
    </view>

    <!-- 商品标题 -->
    <view class="product-title-section">
      <text class="product-title">
        {{ productInfo.title }}
      </text>
    </view>

    <!-- 配送信息 -->
    <view class="shipping-section">
      <view 
        v-for="(shipping, index) in shippingInfo" 
        :key="index"
        class="shipping-item"
      >
        <text class="shipping-label">{{ shipping.label }}</text>
        <view class="shipping-detail">
          <text>{{ shipping.value }}</text>
          <text v-if="shipping.extra" class="shipping-extra">{{ shipping.extra }}</text>
          <IconFont v-if="shipping.hasArrow" font-class-name="iconfont" class-prefix="icon" name="right" size="16" class="shipping-arrow" />
        </view>
      </view>
    </view>

    <!-- 服务保障 -->
    <view class="guarantee-section">
      <view class="guarantee-row">
        <text class="guarantee-label">保障</text>
        <view class="guarantee-detail">
          <text 
            v-for="(guarantee, index) in guarantees" 
            :key="index"
            class="guarantee-item"
          >
            {{ guarantee }}
          </text>
          <IconFont font-class-name="iconfont" class-prefix="icon" name="right" size="16" class="guarantee-arrow" />
        </view>
      </view>
    </view>

    <!-- 商品详情 -->
    <view class="product-details">
      <text class="details-title">商品详情</text>
      <view class="details-content">
        <text 
          v-for="(paragraph, index) in productDetails" 
          :key="index"
          class="details-paragraph"
        >
          {{ paragraph }}
        </text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { IconFont } from "@nutui/icons-vue-taro";
/**
 * 商品信息接口定义
 * @interface ProductInfo
 */
interface ProductInfo {
  /** 商品价格 */
  price: number
  /** 价格标签 */
  priceTag: string
  /** 原价 */
  originalPrice: number
  /** 销售数量 */
  salesCount: number
  /** 商品标题 */
  title: string
}

/**
 * 商品图片接口定义
 * @interface ProductImage
 */
interface ProductImage {
  /** 图片URL */
  url: string
  /** 图片alt描述 */
  alt: string
}

/**
 * 配送信息接口定义
 * @interface ShippingInfo
 */
interface ShippingInfo {
  /** 配送标签 */
  label: string
  /** 配送值 */
  value: string
  /** 额外信息 */
  extra?: string
  /** 是否显示箭头 */
  hasArrow?: boolean
}

/**
 * 商品基本信息
 * 使用统一的占位图片地址以确保小程序兼容性
 */
const productInfo = reactive<ProductInfo>({
  price: 256,
  priceTag: '起券后价',
  originalPrice: 256,
  salesCount: 3600,
  title: '森希洁 母婴除菌皂露 专用皂肥皂除菌皂男女通用除菌皂露'
})

/**
 * 商品图片列表
 * 性能优化：使用统一图片地址减少网络请求
 */
const productImages = reactive<ProductImage[]>([
  {
    url: 'http://www.dzgktf.com/templets/default/images/wtyt.jpg',
    alt: '商品图片1'
  },
  {
    url: 'http://www.dzgktf.com/templets/default/images/wtyt.jpg',
    alt: '商品图片2'
  }
])

/**
 * 配送信息列表
 * 使用响应式数据确保界面实时更新
 */
const shippingInfo = reactive<ShippingInfo[]>([
  {
    label: '发货',
    value: '48 小时内发货',
    hasArrow: false
  },
  {
    label: '',
    value: '免运费',
    extra: '广西南宁发货',
    hasArrow: true
  }
])

/**
 * 服务保障列表
 * 使用数组形式便于后续扩展和维护
 */
const guarantees = reactive<string[]>([
  '先用后付',
  '运费险',
  '7 天无理由'
])

/**
 * 商品详情描述
 * 分段展示提升可读性和渲染性能
 */
const productDetails = reactive<string[]>([
  '因为是采取天然的健康出菌皂，皂液制作出来的，纯天然没有副作用，健康又非常的好。婴儿洗衣液婴儿洗衣液，除菌皂效果效果非常好，皮肤会清洁的，比较干净，但是用完以后最好擦点宝宝用的专用乳霜；',
  '婴儿洗衣液婴儿洗衣液，除菌皂效果效果非常好，皮肤会清洁的，比较干净，但是用完以后最好擦点宝宝用的专用乳霜；皮肤会清洁的，比较干净，但是用完以后最好擦点'
])
</script>

<style lang="scss">
/**
 * 商品详情组件样式
 * 1. 所有尺寸单位使用rpx确保跨设备适配
 * 2. 字体大小遵循设计规范：主标题36-48rpx，正文28-30rpx，小字24-26rpx
 * 3. 间距遵循8rpx倍数原则，确保视觉统一
 * 4. 性能优化：使用transform进行动画，避免重排重绘
 */

.product-container {
  width: 100%;
  background-color: #ffffff;
}

// 商品图片区域
.product-images {
  padding: 32rpx;
  background-color: #f9fafb;

  .image-group {
    display: flex;
    align-items: center;
    gap: 32rpx;
    margin-bottom: 32rpx;

    .thumbnail-container {
      display: flex;
      gap: 16rpx;

      .thumbnail {
        width: 160rpx;
        height: 160rpx;
        background-color: #ffffff;
        border-radius: 16rpx;
        overflow: hidden;
        border: 1rpx solid #e5e7eb;

        .thumbnail-image {
          width: 100%;
          height: 100%;
          will-change: transform;
          backface-visibility: hidden;
        }
      }
    }

    .view-more {
      display: flex;
      align-items: center;
      color: #6b7280;
      margin-left: auto;

      .view-more-text {
        font-size: 32rpx;
      }

      .view-more-icon {
        margin-left: 8rpx;
      }
    }
  }
}

// 价格区域
.price-section {
  padding: 0 32rpx 24rpx;

  .price-group {
    display: flex;
    align-items: baseline;
    gap: 16rpx;
    margin-bottom: 8rpx;

    .price-main {
      color: #ef4444;
      font-size: 48rpx;
      font-weight: bold;
    }

    .price-tag {
      color: #9ca3af;
      font-size: 24rpx;
    }

    .price-original {
      color: #9ca3af;
      font-size: 24rpx;
      text-decoration: line-through;
    }

    .sales-count {
      color: #9ca3af;
      font-size: 24rpx;
      margin-left: auto;
    }
  }
}

// 商品标题
.product-title-section {
  padding: 0 32rpx 32rpx;

  .product-title {
    font-size: 36rpx;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
}

// 配送信息
.shipping-section {
  padding: 24rpx 32rpx;
  border-top: 1rpx solid #f3f4f6;

  .shipping-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .shipping-label {
      color: #6b7280;
      font-size: 28rpx;
    }

    .shipping-detail {
      display: flex;
      align-items: center;
      color: #4b5563;
      font-size: 28rpx;

      .shipping-extra {
        margin: 0 32rpx;
      }

      .shipping-arrow {
        color: #9ca3af;
      }
    }
  }
}

// 服务保障
.guarantee-section {
  padding: 24rpx 32rpx;
  border-top: 1rpx solid #f3f4f6;

  .guarantee-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .guarantee-label {
      color: #6b7280;
      font-size: 28rpx;
    }

    .guarantee-detail {
      display: flex;
      align-items: center;
      color: #4b5563;
      font-size: 28rpx;

      .guarantee-item {
        margin-right: 32rpx;

        &:last-of-type {
          margin-right: 0;
        }
      }

      .guarantee-arrow {
        color: #9ca3af;
        margin-left: 16rpx;
      }
    }
  }
}

// 商品详情
.product-details {
  margin-top: 32rpx;
  padding: 32rpx;
  border-top: 16rpx solid #f3f4f6;

  .details-title {
    font-size: 36rpx;
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 32rpx;
    display: block;
  }

  .details-content {
    color: #4b5563;
    font-size: 28rpx;
    line-height: 1.8;

    .details-paragraph {
      display: block;
      margin-bottom: 24rpx;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>